<script>
import { cloud } from '@/framework/utils/request'
import {
  addAd,
  getAccountBalance,
  getAdvertNameList,
  getGoodsList,
  getMyMallInfoDetail
} from '@/api/mallApi/advert'

export default {
  name: 'advertShop',
  data() {
    return {
      isDisabled: false,
      price: 0,
      goodsList: [],
      // 账户余额
      accountBalance: 0,
      spaceNameList: [],
      uploadUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      form: {
        // 广告名称
        adName: '',
        spaceId: '',
        adType: '',
        adShowId: '',
        startTime: '',
        endTime: '',
        img: '',
        amount: 0
      },
      rules: {
        adName: [
          { required: true, message: '请输入广告位名称', trigger: 'blur' }
        ],
        spaceId: [
          { required: true, message: '请选择广告位', trigger: 'change' }
        ],
        adType: [
          { required: true, message: '请选择广告类型', trigger: 'change' }
        ],
        adShowId: [
          { required: true, message: '请选择广告类型值', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        img: [{ required: true, message: '请上传广告图片', trigger: 'change' }],
        amount: [{ required: true, message: '请输入竞价', trigger: 'blur' }]
      }
    }
  },
  created() {
    getAdvertNameList().then((res) => {
      if (res.code === '00000') {
        this.spaceNameList = res.data
      }
    })
    getAccountBalance().then((res) => {
      if (res.code === '00000') {
        this.accountBalance = res.data.accountBalance
      }
    })
  },
  methods: {
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {},
    handleSuccess(response, file, fileList) {
      this.form.img = response.data.fileUrl
    },
    recharge() {
      this.$router.push({
        path: '/mall/seller',
        query: {
          amount: this.form.amount
        }
      })
    },
    handleChange() {
      if (this.form.adType === 1) {
        this.goodsList = []
        this.label = '商品'
        getGoodsList()
          .then((res) => {
            if (res.code === '00000') {
              this.goodsList = res.data.rows
            }
          })
          .catch((err) => {})
      }
      if (this.form.adType === 2) {
        this.goodsList = []
        this.label = '店铺'
        getMyMallInfoDetail()
          .then((res) => {
            if (res.code === '00000') {
              // 把 res.data[] 中的 mallCode变成 id=, mallName变成name
              this.goodsList = res.data.map((item) => {
                return {
                  id: item.mallCode,
                  name: item.mallName
                }
              })
              console.log('this.goodsList: ', this.goodsList)
            }
          })
          .catch((err) => {})
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          addAd(this.form)
            .then((res) => {
              if (res.code === '00000') {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.form.spaceId = ''
                this.form.adShowId = ''
                this.form.adName = ''
                this.form.amount = 0
                // 重置表单
                this.$refs.form.resetFields()
                this.isDisabled = false
              }
            })
            .catch((err) => {
              this.isDisabled = false
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      // 重置表单
      this.$refs.form.resetFields()
      this.price = 0
    },
    handleS() {
      // 根据id查询广告位价格
      this.price = this.spaceNameList.find(
        (item) => item.id === this.form.spaceId
      ).price
    }
  }
}
</script>

<template>
  <div class="advertPage">
    <div class="form">
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="160px"
        :inline="true"
      >
        <el-form-item label="广告位" prop="spaceId">
          <el-tooltip content="请选择广告位" placement="top">
            <el-select
              clearable
              @change="handleS"
              style="width: 550px"
              v-model="form.spaceId"
              placeholder="请选择所属广告位"
            >
              <el-option
                v-for="item in spaceNameList"
                :key="item.id"
                :label="item.adSpaceName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="广告位名称" prop="adName">
          <el-tooltip content="长度2-20位" placement="top">
            <el-input
              clearable
              style="width: 550px"
              v-model="form.adName"
              placeholder="请输入中文、字母、数字。或者正斜杠"
            ></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select
            clearable
            style="width: 550px"
            @change="handleChange"
            v-model="form.adType"
            placeholder="请选择广告类型"
          >
            <el-option label="商品详情" :value="1"></el-option>
            <el-option label="店铺" :value="2"></el-option>
            <!--            <el-option label="促销活动" :value="3"></el-option>-->
            <!--            <el-option label="秒杀活动" :value="4"></el-option>-->
            <!--            <el-option label="拼团" :value="5"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="广告类型值选择">
          <el-select
            style="width: 550px"
            clearable
            v-model="form.adShowId"
            :placeholder="`请选择关键词`"
          >
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item label="竞价" prop="amount">
            <el-tooltip
              content="请输入大于等于0的数（保留两位小数）"
              placement="top"
            >
              <el-input
                clearable
                style="width: 350px"
                v-model="form.amount"
                placeholder="请输入竞价"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button
              type="text"
              style="width: 200px; margin-left: -20px; color: #ccc"
            >
              {{ price }}元/次
            </el-button>
          </el-form-item>

          <!-- 账户余额 -->
          <el-form-item label="账户余额">
            <el-button type="text" style="width: 350px; font-size: 16px"
            >{{ accountBalance }}
            </el-button>
            <!--          <el-button-->
            <!--            @click="recharge"-->
            <!--            style="margin-left: -74px; background-color: #eb6009; color: #fff"-->
            <!--          >充值-->
            <!--          </el-button>-->
          </el-form-item>
        </el-row>
        <!-- 开始时间 -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            type="datetime"
            clearable
            v-model="form.startTime"
            style="width: 550px"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <!-- 结束时间 -->
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            type="datetime"
            clearable
            v-model="form.endTime"
            style="width: 550px"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <!-- 广告图片 -->
        <el-form-item label="广告图片" prop="img">
          <el-upload
            style="display: inline"
            :action="uploadUrl"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :show-file-list="false"
          >
            <el-input
              placeholder="最佳尺寸：750像素 x 370像素"
              style="width: 970px"
              v-model="form.img"
            ></el-input>
          </el-upload>
          <el-image
            style="
              width: 100px;
              display: inline-block;
              vertical-align: middle;
              height: 36px;
            "
            :src="form.img"
            :preview-src-list="[form.img]"
            alt=""
          >
            <i class="el-icon-picture-outline"></i>
          </el-image>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="submitForm" :disabled="isDisabled" type="primary"
          >确定
          </el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-row>
      </el-form>
    </div>
    <!-- /.form -->
  </div>
</template>

<style scoped lang="scss">
.advertPage {
  width: 98%;
  margin-bottom: 1%;
  margin-left: 1%;
  overflow: hidden;

  .form {
    padding-top: 20px;
    margin-top: 20px;
    background-color: #fff;
    padding-bottom: 20px;
  }
}
</style>
